<template>
  <div class="map-content">
    <el-select
      class="el-select-1"
      v-model="value"
      @change="select"
      placeholder="请选择"
    >
      <el-option
        v-for="item in deptList"
        :key="item.deptId"
        :label="item.deptName"
        :value="item.deptId"
      >
      </el-option>
    </el-select>
    <el-select
      class="el-select-2"
      v-model="value1"
      @change="select1"
      placeholder="请选择"
    >
      <el-option
        v-for="item in projectList"
        :key="item.deptId"
        :label="item.deptName"
        :value="item.deptId"
      >
      </el-option>
    </el-select>
    <baidu-map
      class="bm-view"
      :center="{ lng: 110.404, lat: 43.915 }"
      :scroll-wheel-zoom="true"
      :zoom="4"
      @ready="handler"
    >
      <bml-marker-clusterer :averageCenter="true">
        <bm-marker
          v-for="marker of markers"
          :key="JSON.stringify(marker)"
          :position="{ lng: marker.lng, lat: marker.lat }"
          :icon="{
            url: require(`@/assets/image/mark.gif`),
            size: { width: 31, height: 36 },
          }"
          @click="open(marker)"
        ></bm-marker>
      </bml-marker-clusterer>
      <bm-overlay
        pane="labelPane"
        :lng="bmOverlay.lng"
        :lat="bmOverlay.lat"
        :class="{ sample: true }"
        @draw="draw"
        v-if="bmOverlay.visibility"
      >
        <div class="marker-arrow">
          {{ bmOverlay.title }}
          <div class="text">合同额：{{ bmOverlay.amount }}</div>
        </div>
      </bm-overlay>
    </baidu-map>
  </div>
</template>
<script>
import { BmlMarkerClusterer } from "vue-baidu-map";
export default {
  name: "vi-map",
  components: {
    BmlMarkerClusterer,
  },
  props: {
    deptId: {},
    mapStyleJson: {},
    deptList: {
      default: () => [],
    },
    mapList: {
      default: () => [],
    },
    projectList: {
      default: () => [],
      type: Array,
    },
    projectId: {},
  },
  data() {
    return {
      markers: [],
      active: false,
      value: "",
      bmOverlay: {
        lng: "",
        lat: "",
        visibility: false,
      },
    };
  },
  watch: {
    mapList: {
      handler() {
        let markers = [];
        this.mapList.forEach((item) => {
          const as = item.center.split(",");
          markers.push({
            lng: as[0],
            lat: as[1],
            title: item.deptName,
            ...item,
          });
        });
        this.markers = markers;
        console.log(this.markers);
      },
      immediate: true,
      deep: true,
    },
    deptId: {
      handler() {
        this.value = this.deptId;
      },
      immediate: true,
      deep: true,
    },
    projectId: {
      handler() {
        this.value1 = this.projectId;
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  methods: {
    select() {
      this.bmOverlay = {};
      this.$emit("changeDept", this.value);
    },
    select1() {
      this.bmOverlay = {};
      this.$emit("changeProject", this.value1);
    },
    draw({ el, BMap, map }) {
      console.log(el.getAttribute("lng"));
      let lng = el.getAttribute("lng");
      let lat = el.getAttribute("lat");
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat));
      el.style.left = pixel.x + 28 + "px";
      el.style.top = pixel.y - 22 + "px";
    },
    handler({ BMap, map }) {
      console.log(BMap, map, this.mapStyleJson);
      map.setMapStyle(this.mapStyleJson);
    },
    open(val) {
      if (this.bmOverlay.visibility) {
        this.bmOverlay = {};
      } else {
        this.bmOverlay = val;
        this.bmOverlay.visibility = true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
@import "../styles/map.scss";
</style>
